<template>
    <div id="ComplaintList">
        <div class="box2" v-show="listType=='shop'">
          <group class="write-num">
            <router-link :to="'/gitem/complaint/time?listType='+listType">
              <x-input disabled placeholder="按照时间查找订单号"></x-input>
            </router-link>
          </group>
          <group v-for="(item,i) in allListShop" :key="i">
            <flexbox class="shop-list">
              <flexbox-item :span="4/5"><div class="shop-item-ft">订单编号 {{item.order_sn}}</div></flexbox-item>
              <flexbox-item><div class="shop-item">{{item.order_state}}</div></flexbox-item>
            </flexbox>
            <flexbox class="shop-list">
              <flexbox-item>
                <div class="shop-item-ft">
                  <img v-for="(i,index) in item.goods_img" :key="index" v-if="index<3" :src="i" alt="">
                </div>
              </flexbox-item>
            </flexbox>
            <flexbox class="shop-list" style="width: 80%;float: right">
              <flexbox-item :span="1/3"><div class="shop-item-ft">共{{item.goods_num}}件商品</div></flexbox-item>
              <flexbox-item :span="2/3"><div class="shop-item-ft">实付款：<i>￥{{item.order_amount}}</i></div></flexbox-item>
              <flexbox-item ><div class="shop-item-ft"></div></flexbox-item>
            </flexbox>
            <flexbox class="shop-list">
              <flexbox-item><div class="shop-item-ft btn"><a href="javascript:;" @click="nextFun(item.order_sn)">投诉此单</a></div></flexbox-item>
            </flexbox>
          </group>
          <load-more :show-loading="false" :tip="text" v-show="onAll" background-color="#fbf9fe"></load-more>
        </div>
        <div class="box2" v-show="listType=='service'">
          <group class="write-num">
            <router-link :to="'/gitem/complaint/time?listType='+listType">
              <x-input disabled placeholder="按照时间查找订单号"></x-input>
            </router-link>
          </group>
          <group v-for="(item,index) in allList" :key="index">
            <!--<cell is-link :title="'售后单号 '+item.customer_ordernum" @click.native="nextFun(item.customer_ordernum)" :inline-desc="'状态: '+item.status+item.handle_type">-->
              <!--<span class="slo">{{item.btn_status}}</span>-->
            <!--</cell>-->
            <cell :is-link="false" :title="'售后单号 '+item.customer_ordernum" @click.native="nextFun(item.customer_ordernum)" :inline-desc="'状态: '+item.status+item.handle_type">
            <span class="slo">投诉此单</span>
            </cell>
          </group>
          <load-more :show-loading="false" :tip="text" v-show="onAll" background-color="#fbf9fe"></load-more>
        </div>
      <div v-transfer-dom>
        <x-dialog v-model="showToast" class="dialog-type" :dialog-style="{ 'border-radius': '8px','padding-bottom':'25px','width':'60%'}">
          <checklist title="请选择订单类型" :max=1 required :options="commonList" v-model="checklist"></checklist>
          <x-button type="primary" @click.native="typeOrder">确认</x-button>
        </x-dialog>
      </div>
      <div v-transfer-dom>
        <alert v-model="showAlert"> {{ contentAlert }}</alert>
      </div>
    </div>
</template>

<script>
  import {  Cell , Group , LoadMore,Confirm,TransferDomDirective as TransferDom,Flexbox, FlexboxItem,Datetime, XButton, XDialog,Checklist,cookie,Alert,AlertModule,XInput } from 'vux';
  import { sorts,sign } from '../../aes/make';
  import { Decrypt} from '../../aes/aes';
  import { getCustomerOrders,getOrderNums } from '../../mock/api';
  export default {
    name: "complaint-list",
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      LoadMore,
      Confirm,
      Flexbox,
      FlexboxItem,
      Datetime,
      XButton,
      XDialog,
      Checklist,
      Alert,
      XInput
    },
    data(){
      return{
        onFetching:true,
        show: false,
        type: '4',
        startValue:'',
        endValue:'',
        showToast:false,
        checklist:  [],
        listType:'',
        commonList: [ '商城订单', '售后订单'],
        allList:[],
        allListShop:[],
        onFetching:true,
        startTime:'',
        endTime:'',
        onAll:false,
        text:'已加载全部数据',
        showAlert:false,
        contentAlert:''
      }
    },
    computed:{

    },
    created () {
      let vue = this
      vue.updateTitle('投诉');
      vue.updateGreenRightNum(0);
      vue.updatePreventGoBack(false);
    },
    mounted(){
        this.listType=this.$route.query.listType;
        if(this.$route.query.startTime!=undefined)this.startTime=this.$route.query.startTime;
        if(this.$route.query.endTime!=undefined)this.endTime=this.$route.query.endTime;
        if(this.$route.query.listType=='shop'){
          this.showToast=false;
          this.shopList()
        }else if(this.$route.query.listType=='service'){
          this.showToast=false;
          this.serviceList();
        }else{
          this.showToast=true;
        }
    },
    methods: {
      serviceList(page){
        var so=sorts();
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var json={
          page:this.page,
          pagesize:this.pagesize,
          requestType:0,
          sorts:so,
          uid:uid,
          access_token:access_token
        }
        var si=sign(json);
        json['sign']=si;
        if(this.page==1){
          this.allList=[];
        }
        getCustomerOrders(json).then((res)=>{
          let vue=this;
          if(res.code==40013){
            vue.$router.push({name: 'login', params: {}});
            return false;
          }
          if(res.code==2000){
            var jm=Decrypt(res.data);
            jm=JSON.parse(jm);
            // var jm=res.data;
            this.maxPage==Math.ceil(jm.total/this.pagesize);
            for(var j in jm){
              if(jm[j]!='' && jm[j] instanceof Object){
                //显示状态
                if(jm[j].status=='检测完成'){
                  if(jm[j].different_status==1){
                    jm[j]['btn_status']='需补差价';
                  }else{
                    jm[j]['btn_status']='待确认';
                  }
                }else if(jm[j].status=='确认未付款'){
                  jm[j]['btn_status']='去支付';
                }else if(jm[j].status=='已发货'){
                  jm[j]['btn_status']='确认收货';
                }else{
                  jm[j]['btn_status']='';
                }
                if(jm[j]['handle_type']==undefined){
                  jm[j]['handle_type']='';
                }
                vue.allList.push(jm[j]);
              }
            }
            this.onFetching=false;
          }
        })
      },
      showPlugin() {
        this.show=true;
      },
      doShowToast () {
        this.$vux.toast.show({
          text: 'toast'
        })
      },
      showDig(){
        this.showToast=true;
      },
      typeOrder(){
        console.log(this.checklist);
        this.showToast=false;
        this.onFetching=true;
        if(this.checklist[0]=='售后订单'){
          this.listType='service';
          this.serviceList();
        }else if(this.checklist[0]=='商城订单'){
          this.listType='shop';
          this.shopList();
        }
      },
      //售后订单
      serviceList(){
        var so=sorts();
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var json={
          requestType:0,
          startTime:this.startTime,
          endTime:this.endTime,
          sorts:so,
          uid:uid,
          access_token:access_token
        }
        var si=sign(json);
        json['sign']=si;
        getCustomerOrders(json).then((res)=>{
          let vue=this;
          if(res.code==40013){
            vue.$router.push({name: 'login', params: {}});
            return false;
          }
          if(res.code==2000){
            var jm=Decrypt(res.data);
            jm=JSON.parse(jm);
            // var jm=res.data
            this.maxPage=Math.ceil(jm.total/this.pagesize);
            for(var j in jm){
              if(jm[j]!='' && jm[j] instanceof Object){
                //显示状态
                if(jm[j].status=='检测完成'){
                  if(jm[j].different_status==1){
                    jm[j]['btn_status']='需补差价';
                  }else{
                    jm[j]['btn_status']='待确认';
                  }
                }else if(jm[j].status=='确认未付款'){
                  jm[j]['btn_status']='去支付';
                }else if(jm[j].status=='已发货'){
                  jm[j]['btn_status']='确认收货';
                }else if(jm[j].status=='确认收货'){
                  jm[j]['btn_status']='已完结';
                  jm[j]['status']='已完结';
                  jm[j]['handle_type']='';
                  jm[j]['different_status']='';
                }else if(jm[j].status=='待处理'){
                  jm[j]['btn_status']='待处理';
                  jm[j]['handle_type']='';
                  jm[j]['different_status']='';
                }else{
                  jm[j]['btn_status']='';
                }
                if(jm[j]['handle_type']==undefined){
                  jm[j]['handle_type']='';
                }
                if(jm[j]['different_status']==1){
                  jm[j]['different_status']='加价';
                }else if(jm[j]['different_status']==2){
                  jm[j]['different_status']='退款';
                }else{
                  jm[j]['different_status']='';
                }
                vue.allList.push(jm[j]);
              }
            }
            this.onFetching=false;
          }
        })
      },
      //商城订单
      shopList(){
        var so=sorts();
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var json={
          requestType:0,
          startTime:this.startTime,
          endTime:this.endTime,
          sorts:so,
          uid:uid,
          access_token:access_token
        }
        var si=sign(json);
        json['sign']=si;
        if(this.page==1){
          this.allList=[];
        }
        getOrderNums(json).then((res)=>{
          let vue=this;
          if(res.code==40013){
            vue.$router.push({name: 'login', params: {}});
            return false;
          }else{
            if(res.code==2000){
              // var jm=res.data;
              var jm=Decrypt(res.data);
              jm=JSON.parse(jm);
              console.log(jm);
              for(var j in jm){
                vue.allListShop.push(jm[j]);
              }
              this.onAll=false;
            }else{
              this.onAll=false;
              this.onAll=true;
              this.text='暂无数据'
              return false;
            }
          }
        })
      },
      nextFun(num){
        this.$router.push({ name: 'complaintIndex', query: {complaintType:this.$route.query.complaintType, listType: this.listType,orderNum:num }})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/1px.less';
  @huang:#ff6000;
  .shop-list{
    padding:8px 25px 8px 15px;
  }
  .shop-list{
    border-bottom: 1px solid #F5F5F5;
  }
.shop-item,.shop-item-ft {
  text-align: right;
  color: @huang;
  border-radius: 4px;
  background-clip: padding-box;
  box-sizing: border-box;
  font-size: 15px;
}
.shop-item-ft{
  text-align: left;
  color: #333333;
  font-size: 15px;
  img{
    width:2.3rem ;
    height: 2.3rem;
    margin-left: 20px;
  }
  i{
    color: @huang;font-size: 15px;
  }
}
  .btn{
    a{
      display: block;
      font-size: 14px;
      text-align: center;
      float:right;
      border:1px solid @huang;
      color: @huang;
      border-radius: 5px;
      padding: 4px 10px;
    }
}

  @hong:#cf0808;
  @blue:#1babe3;
  @green:#51ac33;
  .slo{
    color: @green;
    margin-right: 4px;
  }
  button.weui-btn, input.weui-btn{
    width: 80%;
    padding: 0px 10px;
    height: 2em;
    line-height: 2em;
    font-size: 1.1em;
    border-radius: 2em;
  }
</style>
